/* eslint-disable react-hooks/exhaustive-deps */
/* eslint-disable @typescript-eslint/ban-types */
/* eslint-disable @typescript-eslint/no-explicit-any */
import React, { useEffect, useState } from "react";
import {
  Input,
  Select,
  Button,
  Form,
  Col,
  Row,
  Space,
  Checkbox,
  Radio,
  Upload,
  Modal,
} from "antd";
import { PlusOutlined } from "@ant-design/icons";
import { VehicleFormProps } from "./interfaceType";
const formItemLayout = {
  labelCol: { span: 6 },
  wrapperCol: { span: 14 },
};
const seatOptions = ["0~2座", "3座", "4座", "5座", "6座以上"];
const bodyOptions = ["两厢", "三厢", "SUV", "商务车", "客车", "跑车", "旅行车"];
const displacementOptions = [
  "1.0及以上",
  "1.1-1.6L",
  "1.7-2.0L",
  "2.1-2.5L",
  "2.6-3.0L",
  "3.1-4.0L",
  "4.0L以上",
];
const VehicleForm: React.FC<VehicleFormProps> = ({
  previewOpen,
  previewImage,
  handleCancel,
  fileList,
  handleChange,
  onFinish,
  editMode,
  selectedRecord,
  setFileList,
  setPreviewOpen,
}) => {
  const [selectedYears, setSelectedYears] = useState<string[]>([]);
  const handleYearChange = (selectedValues: string[]) => {
    setSelectedYears(selectedValues);
  };
  const [form] = Form.useForm();
  const uploadButton = (
    <button style={{ border: 0, background: "none" }} type="button">
      <PlusOutlined />
      <div style={{ marginTop: 8 }}>Upload</div>
    </button>
  );
  const [modifiedImageUrl, setModifiedImageUrl] = useState<string | undefined>(
    previewImage
  );
  useEffect(() => {
    if (editMode && selectedRecord) {
      form.setFieldsValue({
        ...selectedRecord,
      });
      setFileList([
        { url: selectedRecord.cximage.replace(/\/upload/, "/upload/") },
      ]);
      setModifiedImageUrl(
        selectedRecord.cximage.replace(/\/upload/, "/upload/")
      );
    } else if (!editMode) {
      form.resetFields();
    }
  }, [editMode, selectedRecord, form]);
  return (
    <Form
      name="validate_other"
      {...formItemLayout}
      onFinish={onFinish}
      style={{ minWidth: 700, paddingLeft: "12px" }}
      layout="horizontal"
      form={form}
    >
      <Row gutter={16}>
        <Col span={12}>
          <Form.Item
            name="cxname"
            label="车型名"
            hasFeedback
            rules={[{ required: true, message: "请输入车型名" }]}
          >
            <Input style={{ width: 200 }} />
          </Form.Item>
        </Col>
        <Col span={12}>
          <Form.Item
            name="brand"
            label="品牌"
            hasFeedback
            rules={[{ required: true, message: "请输入品牌" }]}
          >
            <Input style={{ width: 200 }} />
          </Form.Item>
        </Col>
      </Row>
      <Row gutter={16}>
        <Col span={12}>
          <Form.Item name="style" label="款式" style={{ marginLeft: "12px" }}>
            <Input style={{ width: 200, marginLeft: "-10px" }} />
          </Form.Item>
        </Col>
        <Col span={12}>
          <Form.Item name="year" label="年款" hasFeedback>
            <Select
              placeholder="选择年款"
              style={{ width: "200px", marginLeft: "-20px" }}
              mode="multiple"
              onChange={handleYearChange}
              value={selectedYears}
            >
              <Select.Option value="2023">2023</Select.Option>
              <Select.Option value="2024">2024</Select.Option>
            </Select>
          </Form.Item>
        </Col>
      </Row>
      <Form.Item name="seats" label="座位数" style={{ marginTop: "-15px" }}>
        <Checkbox.Group style={{ width: "500px", marginLeft: "-145px" }}>
          <Row>
            {seatOptions.map((item, index) => (
              <Col span={4} key={index}>
                <Checkbox value={item} style={{ lineHeight: "32px" }}>
                  {item}
                </Checkbox>
              </Col>
            ))}
          </Row>
        </Checkbox.Group>
      </Form.Item>
      <Form.Item name="boxtype" label="厢式" style={{ marginTop: "-15px" }}>
        <Checkbox.Group style={{ width: "900px", marginLeft: "-145px" }}>
          <Row>
            {bodyOptions.map((item, index) => (
              <Col span={2} key={index}>
                <Checkbox value={item} style={{ lineHeight: "32px" }}>
                  {item}
                </Checkbox>
              </Col>
            ))}
          </Row>
        </Checkbox.Group>
      </Form.Item>
      <Form.Item
        name="displacement"
        label="排量"
        style={{ marginTop: "-15px" }}
      >
        <Checkbox.Group style={{ width: "1200px", marginLeft: "-145px" }}>
          <Row>
            {displacementOptions.map((item, index) => (
              <Col span={2} key={index}>
                <Checkbox value={item} style={{ lineHeight: "32px" }}>
                  {item}
                </Checkbox>
              </Col>
            ))}
          </Row>
        </Checkbox.Group>
      </Form.Item>
      <Form.Item
        name="TransmissionType"
        label="变速器类型"
        style={{ marginTop: "-15px" }}
      >
        <Radio.Group style={{ marginLeft: "-125px" }}>
          <Radio value="手动"> 手动 </Radio>
          <Radio value="自动"> 自动 </Radio>
        </Radio.Group>
      </Form.Item>
      <Form.Item name="cximage" label="车型照片">
        <>
          <Upload
            action="https://run.mocky.io/v3/435e224c-44fb-4773-9faf-380c5e6a2188"
            listType="picture-card"
            fileList={fileList}
            onChange={handleChange}
            onPreview={() => setPreviewOpen(true)}
          >
            {fileList?.length ? null : uploadButton}
          </Upload>
          <Modal open={previewOpen} footer={null} onCancel={handleCancel}>
            <img
              alt="example"
              style={{ width: "100%" }}
              src={modifiedImageUrl}
            />
          </Modal>
        </>
      </Form.Item>
      <Form.Item wrapperCol={{ span: 18, offset: 6 }}>
        <Space>
          {editMode ? (
            <Button type="primary" htmlType="submit">
              修改
            </Button>
          ) : (
            <Button type="primary" htmlType="submit">
              提交
            </Button>
          )}
          <Button htmlType="reset">重置</Button>
        </Space>
      </Form.Item>
    </Form>
  );
};

export default VehicleForm;
